import React, { memo, useState, useEffect } from 'react';
import { Input, Button } from 'antd';
import { OverviewWrapper } from "./style"
import { socket } from "@/utils/socket";

// 与服务器连接成功
// socket.on('connect',() => {
//   console.log('socket链接成功！'+socket.id)
// })
// 向服务器发送消息
socket.emit('sendToServer',{
  message:'我是客户端,来陪我聊聊'
})

const Overview = memo(() => {
  let [status,setStatus] = useState('')
  let [message,setMessage] = useState('')
  // 向服务器发送消息
  let clickFn = ()=> {
    console.log(status,message,88);
    socket.emit('sendToServer',{
      message: status
    })
  }
  useEffect(()=>{
    // 接收服务器发送的消息
    socket.on('sendToClient',(message) => {
      setMessage(message.message)
      console.log(message,778)
    })
  },[])// eslint-disable-line
  return (
    <OverviewWrapper>
      <Input style={{width: '200px'}} onChange={e=> setStatus(e.target.value)} value={status}/>
      <Button onClick={e=>clickFn()}>发送</Button>
      <Button onClick={e=>socket.disconnect()}>中断</Button>
      <span>{}</span>
    </OverviewWrapper>
  );
});

export default Overview;